<!-- 合格率 -->
<template>
  <div>
    <div class="searchbox">
      <el-form :inline="true" size="small" label-width="100px">
        <jt-easy-collapse :has-expand="true">
          <template slot="expand">
            <el-form-item label="日期">
              <el-date-picker v-model="form.fromDate" type="date" value-format="yyyy-MM-dd HH:mm:ss" placeholder=""></el-date-picker>
            </el-form-item>
            <el-form-item label="至" label-width="25px">
              <el-date-picker v-model="form.toDate" type="date" value-format="yyyy-MM-dd HH:mm:ss" placeholder=""></el-date-picker>
            </el-form-item>
            <!-- <el-form-item label="日期:">
               <el-date-picker size="small"  :default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd HH:mm:ss" v-model="date" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"  style="width: 420px">
               </el-date-picker>
            </el-form-item> -->
            <el-form-item style="margin-left: 20px;">
              <el-button size="mini" type="primary"  @click="showList">查询</el-button>
            </el-form-item>
            <el-form-item>
              <el-button size="mini" @click="clenaFrom">清除</el-button>
            </el-form-item>
          </template>
        </jt-easy-collapse>
      </el-form>
    </div>
    <div class="contentbox">
      <data-infomation :show.sync="isShowAdd" :dataEnd='fromDateEnd' :stDate='toDateEnd' @refreshAdd="showList"></data-infomation>
      <el-button plain type="primary" @click="dataInformation()">数据信息</el-button>
      <div id='my-chart' style='width：600px;height:600px'></div>
    </div>
  </div>
</template>

<script>
import {
 getPercentOfPass
} from "service/task";
  import JtEasyCollapse from 'components/jt-easy-collapse/index';
  import echarts from 'echarts';
  import DataInfo from 'dialog/report-center/qualification-rate/data-infomation';
  export default {
    name: 'RemindingCenter',
    components: {
      'jt-easy-collapse': JtEasyCollapse,
      'data-infomation': DataInfo
    },
    data() {
      return {
         date:"",
        fromDateEnd:"",
        toDateEnd:"",
        isShowAdd:false,
       form: {
          fromDate: "",
          toDate: ""
        },
      }
    },
    mounted() {
      // this.showList();
      this.drawLine();
    },
    methods: {
      dataInformation() {
      if(this.form.fromDate == "" || this.form.fromDate==null || this.form.fromDate == " " ||
      this.form.toDate == "" || this.form.toDate==null || this.form.toDate == " "){
          this.$message({
            type: 'error',
            message: '请选择起止时间!'
          });
          return;
        }
        this.fromDateEnd = this.form.fromDate;
        this.toDateEnd =this.form.toDate;
        // this.fromDateEnd = this.date[0];
        // this.toDateEnd = this.date[1];
        this.isShowAdd = true;
      },
      clenaFrom(){
        this.form = {};
        this.date="";
      },
      drawLine() {
        // 基于准备好的dom，初始化echarts实例
      //   let myChart = echarts.init(document.getElementById('my-chart'))
      //   // 绘制图表
      //   myChart.setOption({
      //     title: {
      //       text: '合格率(%)'
      //     },
      //     tooltip: {},
      //     xAxis: {
      //       type: 'category',
      //       data: []
      //     },
      //     yAxis: {
      //       type: 'value'
      //     },
      //     series: [{
      //       data: [],
      //       type: 'line'
      //     }]
      //   });
      },
      // 表格数据展示
      showList() {
      if(this.form.fromDate == "" || this.form.fromDate==null || this.form.fromDate == " " ||
      this.form.toDate == "" || this.form.toDate==null || this.form.toDate == " "){
          this.$message({
            type: 'error',
            message: '请选择起止时间!'
          });
          return;
        }
        getPercentOfPass({
          // this.axios.get('/system/testFieldList', {
          fromDate: this.form.fromDate,
          toDate: this.form.toDate
          //  fromDate: this.date[0],
          // toDate: this.date[1]
        }).then(res => {
         if(res.data.result.list) {
           
          var zData = [];
           if(res.data.result.list[0].cnt!=0 || res.data.result.list[0].cunt!=0){
          this.testList = res.data.result.list;
          // var xData = [];
          // var yData = [];
          // for(var i =0; i < this.testList.length; i++) {
          //   xData[i] = ['合格率'];
          //   yData[i] = this.testList[i]['rate'].substring(0,this.testList[i]['rate'].indexOf("%"));;
          // }
          zData[0] = this.testList[0]['rate'].substring(0,this.testList[0]['rate'].indexOf("%"));;
          zData[1]= 100-zData[0];
         }else{
            zData[0] =0;
            zData[1] =0;
         }
            // 基于准备好的dom，初始化echarts实例
        // let myChart = echarts.init(document.getElementById('my-chart'))
        // // 绘制图表
        // myChart.setOption({
        //   title: {
        //     text: '合格率(%)'
        //   },
        //   tooltip: {},
        //   xAxis: {
        //     type: 'category',
        //     data: xData
        //   },
        //   yAxis: {
        //     type: 'value'
        //   },
        //   series: [{
        //     data: yData,
        //     type: 'bar',
        //     barWidth : 50
        //   }]
        // });
         let myChart = echarts.init(document.getElementById('my-chart'));
          // 绘制图表
          myChart.setOption({
            title : {
                text: '合格率(%)',
                textStyle:{
                  fontSize:35
                },
                x:'center'
            },
            legend: {       //右侧提示状态图
                orient: 'vertical',
                x: 'right',
                data:['合格','不合格'],
                top:'10%',
                left:100,
                itemGap:20,
                width:200,
                textStyle:{
                  fontSize:30
                }
            },
            graphic:{
                type:'text',
                left:'22%',
                top:'20%',
                style:{
                text:'',
                textAlign:'center',
                fill:'#302e33',
                fontSize:20
              }
          },
          color:['#228B22','#4169E1'],
          series: [{
          name: '',
          type: 'pie',
          radius: ['1%', '60%'], //调整大小
          center: ['50%', '50%'],   //调整位置
          avoidLabelOverlap: false,
          label: {
          normal: {
          show: true,
                              position: 'inside',
                              fontSize:'20',
                              formatter:'{d}%'
          }
          },
          labelLine: {
          normal: {
          show: false
          }
          },
          data: [{
              value: zData[0],
              name: '合格'
            }, {
              value: zData[1],
              name: '不合格'
            }]
            }]
          });
          } else {
            return;
          }
        });
      }
    }
  }

</script>
